<template>
  <div class="flex mt-5 mb-5">
    <div class="w-full bg-white border divide-y">
      <div class="w-full p-4 text-gray-500 text-lg flex justify-between">
        <div>项目列表</div>
        <n-button type="primary" @click="newProject" v-if="isSelf">
          新建项目
        </n-button>
      </div>
      <div class="w-full p-4">
        <n-list>
          <n-list-item v-for="item in list" :key="item.id">
            <template #suffix>
              <n-button
                type="primary"
                :disabled="item.isMember"
                @click="apply(item.id)"
              >
                {{ item.isMember ? '已是成员' : '申请加入' }}
              </n-button>
            </template>
            <n-thing>
              <div>
                <n-ellipsis :line-clamp="1" :tooltip="false">
                  <n-text class="text-xl font-semibold">
                    {{ item.title }}
                  </n-text>
                </n-ellipsis>
              </div>
              <div class="mb-2 mt-2">
                <n-ellipsis :line-clamp="3">
                  <n-text depth="3">
                    {{ item.goal }}
                  </n-text>
                </n-ellipsis>
              </div>
            </n-thing>
          </n-list-item>
          <div class="w-full p-4">
            <div
              class="text-gray-500 text-center text-lg"
              v-if="list.length === 0"
            >
              暂无
            </div>
          </div>
        </n-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import api from '@/api/api'

const list = ref([])

const route = useRoute()
const router = useRouter()

const message = useMessage()

const props = defineProps(['uid', 'isSelf'])

onMounted(() => {
  init()
})

watch(
  () => route.params,
  () => {
    init()
  }
)

const init = () => {
  api.Project.getProjectList({ id: props.uid }).then((res) => {
    list.value = res.data.list
  })
}

const apply = (id) => {
  api.Project.applyProject({ id }).then((res) => {
    if (res.success) {
      message.success('申请已发送，请等待审核')
    } else {
      message.error('申请发送失败，请重试')
    }
  })
}

const newProject = () => {
  router.push({ name: 'ProjectAdd' })
}
</script>

<style scoped></style>
